<template>
  <div class="summary">
    <div class="model-title">模型精度评定</div>
    <el-table size="small" :data="tableData" border style="width: 100%; " :span-method="objectSpanMethod">
      <!-- <el-table-column prop="date" label="预报断面" align="center" width="100" show-overflow-tooltip />
      <el-table-column prop="date" label="预报项目" align="center" width="200" show-overflow-tooltip />
      <el-table-column label="预报方案精度" align="center">
        <el-table-column prop="name" align="center" label="总场次" />
        <el-table-column prop="state" align="center" label="合格场次" />
        <el-table-column prop="city" align="center" label="合格率(%)" show-overflow-tooltip />
        <el-table-column prop="address" align="center" label="等级" show-overflow-tooltip />
      </el-table-column> -->
      <el-table-column prop="blknm" label="预报断面" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="project" label="预报项目" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="预报方案精度" align="center">
        <el-table-column prop="ccTotal" label="总场次" align="center"> </el-table-column>
        <el-table-column prop="ccPass" label="合格场次" align="center"> </el-table-column>
        <el-table-column prop="passRate" label="合格率(%)" align="center"> </el-table-column>
        <el-table-column prop="level" label="等级" align="center"> </el-table-column>
      </el-table-column>
    </el-table>
    <div class="model-title">模型时效考核</div>
    <el-table border size="small" :data="timeTableData" style="width: 100%;">
      <el-table-column label="预报断面" prop="blknm" align="center" />
      <el-table-column label="计算总场次" prop="ccTotal" align="center" />
      <el-table-column label="成功场次" prop="ccPass" align="center" />
      <el-table-column label="成功率(%)" prop="passRate" align="center" />
      <el-table-column label="最大耗时" prop="maxTake" align="center" />
      <el-table-column label="最小耗时" prop="minTake" align="center" />
      <el-table-column label="平均耗时" prop="avgTake" align="center" />
      <el-table-column label="耗时要求" prop="allowTake" align="center" />
      <el-table-column label="评定等级" prop="level" align="center" />
    </el-table>
  </div>
</template>
<script setup>
const tableData = [
  {
    blkcd: '40501015',
    blknm: '莱芜',
    project: '洪峰',
    ccTotal: '17',
    ccPass: '16',
    passRate: '94.1',
    level: '甲级'
  },
  {
    blkcd: '40501015',
    blknm: '莱芜',
    project: '洪量',
    ccTotal: '17',
    ccPass: '17',
    passRate: '100',
    level: '甲级'
  },
  {
    blkcd: '40501015',
    blknm: '莱芜',
    project: '洪峰、洪量',
    ccTotal: '17',
    ccPass: '16',
    passRate: '94.1',
    level: '甲级'
  },
  {
    blkcd: '40501015',
    blknm: '莱芜',
    project: '洪峰、洪量、峰现时间',
    ccTotal: '17',
    ccPass: '13',
    passRate: '76.5',
    level: '乙级'
  }
]
const timeTableData = [
  {
    blknm: '杨家横',
    ccTotal: '17',
    ccPass: '16',
    passRate: '94.1',
    maxTake: '30s',
    minTake: '25s',
    avgTake: '20s',
    allowTake: '30s',
    level: '优'
  },
  {
    blknm: '莱芜',
    ccTotal: '17',
    ccPass: '16',
    passRate: '94.1',
    maxTake: '30s',
    minTake: '25s',
    avgTake: '20s',
    allowTake: '30s',
    level: '优'
  }
]
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 4 === 0) {
      return {
        rowspan: 4,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>
<style lang="less" scoped>
.summary {
  height: 100%;
  .model-title {
    margin-top: 10px;
  }
  :deep(.el-table) {
    height: 43%;
    margin-top: 20px;
  }
}
</style>
